<template>
  <el-dialog class="dialog-detail-con"
             :visible.sync="visible"
             v-bind="dialogOptions"
             append-to-body>
    <div v-if="$slots.default">
      <slot></slot>
    </div>
    <form-detail v-else
                 :fieldList="fieldList"
                 :model="model"
                 :style="{'--label-width': labelWidth, '--column': column}">
      <template v-for="(item, index) in fieldList">
        <div :slot="item.slotName"
             v-if="item.slotName"
             :key="index">
          <slot :name="item.slotName"
                v-if="item.slotName"></slot>
        </div>
      </template>
    </form-detail>
    <div slot="footer"
         class="dialog-footer">
      <!-- <el-button size="small"
                 v-if="showCancel"
                 @click="close">取 消</el-button> -->
      <el-button size="small"
                 plain
                 @click="confirm">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import FormDetail from '@/components/FormDetail'
export default {
  name: 'index',
  components: {
    FormDetail
  },
  props: {
    dialogOptions: {
      type: Object,
      default: {}
    }, // 弹窗属性
    fieldList: {
      type: Array,
      default: () => []
    }, // 字段数组
    model: {
      type: Object,
      default: () => ({})
    }, // 字段值
    labelWidth: {
      type: String,
      default: '80px'
    }, // label 的宽度
    column: {
      type: Number,
      default: 1
    },
    customClose: {
      type: Boolean,
      default: false
    }, // 点击确定是否需要自定义关闭
    showCancel: {
      type: Boolean,
      default: false
    }, // 是否显示取消按钮
  },
  data() {
    return {
      visible: false,
    }
  },
  methods: {
    /** 打开 */
    open() {
      this.visible = true;
    },
    /** 关闭 */
    close() {
      this.visible = false;
    },
    /** 确定 */
    confirm() {
      if (this.customClose) {
        this.$emit('on-confirm')
      } else {
        this.close();
      }
    }
  }
}
</script>

<style scoped lang="scss">
.dialog-detail-con {
  ::v-deep .el-dialog__body {
    // padding-right: 8px;
    padding-bottom: 8px;
  }
}
</style>
